<template>
  <div class="starHome">
    <div class="head">
      <van-nav-bar left-arrow @click="onClickLeft">
        <template #right>
          <van-icon name="ellipsis" size="22" />
        </template>
      </van-nav-bar>
      <div class="user">
        <div class="userLeft">
          <img src="@/assets/img/find/Bitmapuser.png" alt="" />
        </div>
        <div class="center">
          <p>用户名</p>
          <p>{{fansNum}}粉丝</p>
        </div>
        <div class="userRight">
          <van-button
            round
            type="success"
            color="#FF8592"
            @click="btnClick"
            v-show="showFalse"
            >&nbsp;&nbsp;关注&nbsp;&nbsp;</van-button
          >
          <van-button
            type="success"
            color="#666666"
            round
            v-show="showtrue"
            @click="btnClick2"
            >已关注</van-button
          >
        </div>
      </div>
    </div>
    <div class="body">
      <div class="title">
        <p>秀红颜</p>
        <span>查看更多>></span>
      </div>
      <div class="goods" v-for="(item,index) in 4" :key="index">
        <img src="@/assets/img/find/Bitmap.png" alt="" />
        <p>迪奥 dior迪奥bb霜/妆前xxxxxxxxxxxx</p>
      </div>
    </div>
    <div class="foot">
      <div class="ftitle">
        <p>话题</p>
        <span>共计23篇</span>
      </div>
      <div class="fgoods" v-for="(item,index) in 3" :key="index">
        <h3>DAISY香水亲测体验</h3>
        <img src="@/assets/img/find/063a0334e2eff559547e70fa8a729d03.png" alt="" />
        <p>云白纯净清颜矿物泥面膜，疏通毛孔，解决毛孔粗大的问题，细致毛孔，并且使得肌肤细腻润有光泽</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {useRouter} from 'vue-router'

const router = useRouter()
const onClickLeft = () => router.back();


const showFalse = ref(true);
const showtrue = ref(false);
const fansNum = ref(0)
const btnClick = () => {
  showFalse.value = false;
  showtrue.value = true;
  fansNum.value ++
};
const btnClick2 = () => {
  showFalse.value = true;
  showtrue.value = false;
  fansNum.value --
};
</script>

<style lang="scss" scoped>
.head {
  width: 100%;
  height: 300px;
  // background-color: aquamarine;
  background-image: url('@/assets/img/find/Bitmaphead.png');
}
.user {
  margin-top: 100px;
  display: flex;
  .userLeft {
    width: 80px;
    display: flex;
    height: 70px;
    justify-content: space-between;
    align-items: center;
    img {
      margin-left: 20px;
      width: 70px;
      height: 70px;
      border-radius: 50%;
    }
  }
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-left: 20px;
    p {
    }
  }
  .userRight {
    margin-top: 10px;
    margin-left: 95px;
  }
  p{
    margin-top: 10px;
  }
}
.body {
  display: flex;
  height: 400px;
  // background-color: aquamarine;
  margin: 20px;
  flex-direction: column;
  flex-flow: wrap;
  justify-content: space-between;
  .title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    p {
      font-size: 14px;
      color: rgb(255, 129, 149);
    }
    span {
      font-size: 11px;
      color: rgb(153, 153, 153);
    }
  }
  .goods {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    width: 160px;
    height: 180px;
    // background-color: beige;
    font-size: 12px;
    white-space: nowrap;
    justify-content: space-around;
    img{
      box-shadow: 1px 1px 5px #909090;
    }
    p {
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
.foot{
  display: flex;
  height: 400px;
  // background-color: aquamarine;
  margin: 20px;
  flex-direction: column;
  flex-flow: wrap;
  justify-content: space-between;
  .ftitle{
    width: 100%;
    display: flex;
    justify-content: space-between;
    p {
      font-size: 14px;
      color: rgb(255, 129, 149);
    }
    span {
      font-size: 11px;
      color: rgb(153, 153, 153);
    }
  }
  .fgoods {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    // background-color: beige;
    font-size: 12px;
    white-space: nowrap;
    justify-content: space-around;
    width: 100%;
    h3{
      margin: 10px 0;
    }
    p {
      margin: 10px 0;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    img{
      box-shadow: 1px 1px 5px #909090;
    }
  }
}
</style>